//默认按钮
$default-bg:#F7F7F7;
$default-color:#2f2f2f;
$default-line:#D9D9D9;
$default-bg-hover:#ffffff;
$default-color-hover:#006FD3;
$default-line-hover:#006FD3;
//主要按钮
$primary-bg:#006FD3;
$primary-color:#ffffff;
$primary-line:#006FD3;
$primary-bg-hover:#007DEE;
$primary-color-hover:#ffffff;
$primary-line-hover:#007DEE;
//禁用按钮
$disabled-bg:#DDDDDD;
$disabled-color:#a9a9a9;
$disabled-line:#CCCCCC;
//删除按钮
$danger-bg:#FFF3F5;
$danger-color:#D8373E;
$danger-line:#D8373E;
$danger-bg-hover:#D8373E;
$danger-color-hover:#ffffff;
$danger-line-hover:#D8373E;
//成功按钮
$success-bg:#EEF6FD;
$success-color:#006FD3;
$success-line:#006FD3;
$success-bg-hover:#006FD3;
$success-color-hover:#ffffff;
$success-line-hover:#ffffff;
//警告按钮
$warning-bg:#FFF4E4;
$warning-color:#FF730B;
$warning-line:#FF730B;
$warning-bg-hover:#FF730B;
$warning-color-hover:#ffffff;
$warning-line-hover:#ffffff;


//标准按钮
//*******************************
.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $default-bg;
  border: 1px solid $default-line;
  color: $default-color;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: .1s;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 4px;
  i{
    font-weight: 600;
  }
}

.el-button + .el-button {
  margin-left: 8px
}

//默认按钮
//*******************************
.el-button:focus, .el-button:hover {
  color: $default-color-hover;
  border-color: $default-line-hover;
  background-color: $default-bg-hover;
}

.el-button:active {
  color: $default-color-hover;
  border-color: $default-line-hover;
  outline: 0
}

//禁用按钮
//*******************************
.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover {
  color: $disabled-color;
  cursor: not-allowed;
  background-image: none;
  background-color: $disabled-bg;
  border-color: $disabled-line;
}

//主要按钮
//*******************************
.el-button--primary {
  color: $primary-color;
  background-color: $primary-bg;
  border-color: $primary-line;
}

.el-button--primary:focus, .el-button--primary:hover {
  background: $primary-bg-hover;
  border-color: $primary-line-hover;
  color: $primary-color-hover;
}

.el-button--primary.is-active, .el-button--primary:active {
  background: $primary-bg-hover;
  border-color: $primary-line-hover;
  color: $primary-color-hover;
}

//删除按钮
//*******************************
.el-button--danger {
  color: $danger-color;
  background-color: $danger-bg;
  border-color: $danger-line;
}

.el-button--danger:focus, .el-button--danger:hover {
  color: $danger-color-hover;
  background-color: $danger-bg-hover;
  border-color: $danger-line-hover;
}

.el-button--danger.is-active, .el-button--danger:active {
  color: $danger-color-hover;
  background-color: $danger-bg-hover;
  border-color: $danger-line-hover;
}

//圆角
//*******************************
.el-button.is-round {
  border-radius: 20px;
  padding: 10px 15px
}

//线条成功按钮
//*******************************
.el-button--success {
  color: $success-color;
  background-color: $success-bg;
  border-color: $success-line;
}

.el-button--success:focus, .el-button--success:hover {
  background: $success-bg-hover;
  border-color: $success-line-hover;
  color: $success-color-hover;
}

.el-button--success.is-active, .el-button--success:active {
  background: $success-bg-hover;
  border-color: $success-line-hover;
  color: $success-color-hover;
}


//线条警告按钮
//*******************************
.el-button--warning {
  color: $warning-color;
  background-color: $warning-bg;
  border-color: $warning-line;
}

.el-button--warning:focus, .el-button--warning:hover {
  background: $warning-bg-hover;
  border-color: $warning-line-hover;
  color: $warning-color-hover;
}

.el-button--warning.is-active, .el-button--warning:active {
  background: $warning-bg-hover;
  border-color: $warning-line-hover;
  color: $warning-color-hover;
}

//文字按钮
//*******************************
.el-button--text {
  color: #006FD3;
  background: 0 0;
  padding: 7px 0;
  border: none;
  span{
    padding: 0 5px;
  }
}

.el-button--text:focus, .el-button--text:hover {
  color: #3293EA;
  border-color: transparent;
  background-color: transparent;
  text-decoration: underline;
}

.el-button--text:active {
  color: #3293EA;
  background-color: transparent;
}
.el-button.is-disabled.el-button--text {
  background-color: transparent;
}

.el-button--text.danger{
  color:#D8373E;
  &:hover{
    color: #ec6d73;
  }
}
.el-button--text.danger:active {
  color: #ec6d73;
  background-color: transparent;
}

.el-button--text.success{
  color: #68A820;
  &:hover{
    color: #89c743;
  }
}
.el-button--text.success:active {
  color: #89c743;
  background-color: transparent;
}


//小一号按钮
//*******************************
.el-button--mini, .el-button--mini.is-round {
  padding: 7px 12px;
  font-size: 12px;
}
